<template>
    <div class="content-wrap">
        <Divider orientation="left" class="title">修改登录密码</Divider>
        <div class="personal">
            <Form ref="formPwdInfo" :model="currentuser" :rules="ruleValidate" :label-width="120">
                <FormItem label="当前密码" prop="lastPassword">
                    <Input type="password" v-model="currentuser.lastPassword"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPasswordFir">
                    <Input type="password" v-model="currentuser.newPasswordFir"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="newPasswordSec">
                    <Input type="password" v-model="currentuser.newPasswordSec"></Input>
                </FormItem>
            </Form>
              <div class="btn-group">
                  <Button type="primary" size="large" :loading="amendLoading" @click="amend" style="margin-left:80px">确认修改</Button>
              </div>
        </div>  
    </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.currentuser.newPasswordFir) {
          callback(new Error('两次输入的新密码不一致!'));
      } else {
          callback();
      }
    };
    return {
      currentuser: {
        lastPassword:'',
        newPasswordFir:'',
        newPasswordSec:'',
      },
      ruleValidate: {
        lastPassword: [
          { required: true, message: "请输入密码！", trigger: "blur" }
        ],
        newPasswordFir: [
          { required: true, message: "请输入密码！", trigger: "blur" }
        ],
        newPasswordSec: [
          { required: true, message: "请确认密码！", trigger: "blur" },
          { validator: validatePassCheck,trigger: "blur" }
        ],
      },
      amendLoading:false
    };
  },
  methods: {
    ...mapMutations(["REMOVE_COUNT"]),
    amend() {
      this.$refs["formPwdInfo"].validate(valid => {
        if (valid) {//验证通过
          this.amendLoading=true;
          let dataset={id:this.$store.state.user.id,password:this.currentuser.newPasswordSec,passwordOld:this.currentuser.lastPassword}
          this.$axios.post("/user/password", dataset).then(res => {
            if(res.errorCode==1){
              this.$Message.success("修改个人信息成功，请重新登陆!");
              this.$router.replace("/login");
              this.REMOVE_COUNT();
            }
            this.amendLoading=false;
          });
        } else {
          this.$Message.error("请检查无误后提交!");
          this.amendLoading=false;
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.title{font-size: 22px;color:#5a5a5a}
.personal {
  width: 80%;
  margin: 20px auto;
  @media screen and (max-width: 1000px) {
    width: 80%;
  }
  @media screen and (min-width: 1200px) {
    width: 60%;
  }
}
  .ivu-radio-disabled .ivu-radio-inner{border-color: #2d8cf0 !important;}
</style>
